import React, { Component } from "react";
import PropTypes from "prop-types"
import "./index.css";

export default class Footer extends Component {

  static propTypes = {
    clearTodosAll: PropTypes.func.isRequired,
    changeTodosAll: PropTypes.func.isRequired,
    todos: PropTypes.array.isRequired,
  }

  //清除所有已完成的任务
  clearTodos = () => {
    this.props.changeTodosAll(false)
  }

  //全选和反选
  changeTodos = (e) => {
    this.props.changeTodosAll(e.target.checked)
  }

  render() {
    const { todos } = this.props;
    let checkedLen = todos.filter(item => item.done).length;
    let todosLen = todos.length
    return (
      <div className="footer-box">
        <div className="checkbox-box">
          <input type="checkbox" checked={checkedLen === todosLen && todosLen !== 0 ? true : false} onChange={this.changeTodos}></input>
          <p className="checkbox-text-box">
            <span>已完成 {checkedLen}</span>/<span>全部 {todosLen}</span>
          </p>
        </div>
        <button className="btn btn-danger" onClick={this.clearTodos}>清除已完成任务</button>
      </div>
    );
  }
}
